<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html>
<head>

<title>查看购物车</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/style.css"
	type="text/css" media="screen" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/substyle.css"
	type="text/css" media="screen" />


<script type="text/javascript">
	function numbText(e) {

		//考虑浏览器兼容问题
		if (e && e.stopPropagation) { //e存在
			code = e.which; //firefox获取键码
		} else {
			//不存在 --对应ie浏览器
			code = window.event.keyCode;  //id浏览器中获取键码值
		}

		//alert(code);
		//48--57代表的是数字0-9    8与46代表的是delete 与backspace
		if (!(code >= 48 && code <= 57 || code == 8 || code == 46)) {
			//阻止事务的默认行为执行.

			if (e && e.stopPropagation) { //e存在
				e.preventDefault(); //firefox阻止默认事务执行			

			} else {
				//不存在 --对应ie浏览器
				window.event.returnValue = false; //ie浏览器阻止默认事件执行.

			}

		}
	}

	//id代表要修改的商品    count代表商品的数量
	function changeCount(id, count, max) {

		if (parseInt(count) < 0) {
			count = 1;
		}

		if (parseInt(count) > parseInt(max)) {
			count = max;
		}
		
		if(parseInt(count)==0){
			
			var flag=window.confirm("确认删除商品吗");
			if(!flag){
				return ;
			}
		}

		//向一个servlet发送请求

		location.href = "${pageContext.request.contextPath}/cart?method=update&id=" + id
				+ "&count=" + count;

	}
	
	function delConfirm(e){
		var flag=window.confirm("确认删除商品吗");
		
		if(!flag){
			//不删除商品		
			//要想不删除商品，要阻止事件的默认行为执行.
			if(e&&e.preventDefault){
				// e对象存在，preventDefault方法存在 ---- 火狐浏览器
				e.preventDefault();
			}else{
				// 不支持e对象，或者没有preventDefault方法 ---- IE
				window.event.returnValue = false;
			}

		}
		
	}
	
	function gotoorder(){
		
		location.href="${pageContext.request.contextPath}/order.jsp";	
	}
</script>
</head>

<body>	
		<p class="topbar">&nbsp;</p>
		
		<div id="submain">
		<!-- art-header -->
			<div class="art-header">
				<div class="art-header-png"></div>
				<div class="estore">
					<h1 style="font-size:30px;margin:30px 0 10px 0;">Estore图书商城</h1> 
					<!-- art-blockcontent-body -->
					<div class="art-blockcontent-body">
						
							<form method="post" id="loginForm"
							action="${pageContext.request.contextPath}/user"><input
								type="hidden" name="method" value="login">
								<table style="margin-left:10px;">
									<tr>
										<td colspan="2"><font color='red' style="margin-top:-10px;">${requestScope["login.message"]
																	}</font>
									</td>
								</tr>
									<tr>
										<td class="login">用户名：</td>
										<td><input type="text" value="" name="username"
											id="username" /><br /></td>
								</tr>
									<tr>
										<td class="login">密码：</td>
										<td><input type="password" value="" name="password"
											id="password" /></td>
								</tr>
									<tr class="rem">
										<td colspan="2">
										    <input type="checkbox" name="remember"
											value="on" />记住用户 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
											<input type="checkbox" name="autologin"
											value="on" />自动登陆</td>
								</tr>
									<tr>
										<td colspan="2"><input class="art-button" type="submit"
											name="loginbtn" value="登陆" style="margin-right:10px;"/><button class="art-button"><a
												href='${pageContext.request.contextPath}/regist.jsp' style="color:white;">注册</a></button>
									    </td>
									   
								
									</tr>
							</table></form>
					
					

				</div> 
				<!-- art-blockcontent-body -->
			
			</div>
		</div> 
		<!-- art-header -->
		
		<!-- cart -->
	    <div align="center" id="cart">
	         <table style="width:100%;" class="caption">
	             <tr><td style="width:25%;">商品名称</td><td style="width:25%;">商品单价</td><td style="width:22%;">购买的数量</td><td style="width:20%;">可购买数量</td><td>订单操作</td></tr>
	         </table>
		<c:if test="${empty cart}">
  			购物车无商品
  		</c:if>
         
		<c:if test="${not empty cart}">
			<table  border="1" class="maintable">

				<c:set var="all" value="0" />

				<c:forEach items="${cart}" var="entry">
					<tr>
						<td style="width:25%;">商品名称:${entry.key.name }</td>
						<td style="width:25%;">商品单价:${entry.key.price }</td>
						<td style="width:22%;">
						<input type="button" value="-"
							onclick="changeCount('${entry.key.id }','${entry.value-1}','${entry.key.pnum}')" class="btn">

						<input type='text' value="${entry.value}"
							style="text-align:center;color:#87520E;width:120px;height:25px;" onkeydown="numbText(event);"
							onblur="changeCount('${entry.key.id}',this.value,'${entry.key.pnum}')">

						<input type="button" value='+'
							onclick="changeCount('${entry.key.id}','${entry.value+1}','${entry.key.pnum }')"  class="btn">
						</td>


						<td style="width:20%;">可购买数量:${entry.key.pnum}</td>
						<td><a
							href="${pageContext.request.contextPath}/cart?method=remove&id=${entry.key.id}"
							onclick="delConfirm(event)">删除</a>					
						
						</td>
					</tr>

					<c:set var="all" value="${all+(entry.key.price*entry.value)}" />
				</c:forEach>
				<tr>
					<td colspan="5" align="right">总价:￥${all}元</td>
				</tr>
				<tr>
					<td colspan="5" align="right"><button onclick="gotoorder();" style="cursor:pointer;background:#87520E;border-radius:5px;line-height:40px;border:none;width:160px;color:white;font-size:18px;">进入结算</button></td>
				</tr>
			</table>


		</c:if>
	</div>
	<!-- cart -->
	
	<div id="subart">
	<!-- sideleft -->
	   <div id="sideleft" style="min-height:600px !important;float:left;">
	                    
					    <h3>最新图书</h3>
						<ul>
							<li><img src="images/star.png" height="22" width="24" />&nbsp;&nbsp;<a
								href="#">告白与告别</a></li>
							<li><img src="images/star.png" height="22" width="24" />&nbsp;&nbsp;<a
								href="#">如果我能说了算</a></li>
							<li><img src="images/star.png" height="22" width="24" />&nbsp;&nbsp;<a
								href="#">最遥远的距离</a></li>
							<li><img src="images/star.png" height="22" width="24" />&nbsp;&nbsp;<a
								href="#">从你的世界经过从你的世界经过从你的世界经过</a></li>
							<li><img src="images/star.png" height="22" width="24" />&nbsp;&nbsp;<a
								href="#">再美也美不过想象</a></li>
							<li><img src="images/star.png" height="22" width="24" />&nbsp;&nbsp;<a
								href="#">愿有人陪你颠沛流离</a></li>
							<li><img src="images/star.png" height="22" width="24" />&nbsp;&nbsp;<a
								href="#">笑猫日记</a></li>
							<li><img src="images/star.png" height="22" width="24" />&nbsp;&nbsp;<a
								href="#">再美也美不过想象</a></li>
							<li><img src="images/star.png" height="22" width="24" />&nbsp;&nbsp;<a
								href="#">愿有人陪你颠沛流离</a></li>
							<li><img src="images/star.png" height="22" width="24" />&nbsp;&nbsp;<a
								href="#">笑猫日记</a></li>
					</ul>
				
		</div> 
		<!-- sideleft -->
		
		
		<!-- floatpart -->
		<div id="floatpart">
		      <h3 class="com" style="margin-bottom:10px;">可能喜欢</h3>
		      <div class="marside">
		            <figure>
		                <img src="images/book.png" width="139" height="115">
		                <figcaption>如果我能说了算</figcaption>
		                <span><a href="#">速速抢购</a></span>
		            </figure>
		            <figure>
		                <img src="images/book5.png" width="139" height="115">
		                <figcaption>如果我能说了算</figcaption>
		                <span><a href="#">速速抢购</a></span>
		            </figure>
		            <figure>
		                <img src="images/book2.png" width="139" height="115">
		                <figcaption>如果我能说了算</figcaption>
		                <span><a href="#">速速抢购</a></span>
		            </figure>
		            <figure style="margin-right:0px;border:1 solid blue;">
		                <img src="images/bookname.png" width="139" height="115">
		                <figcaption>如果我能说了算</figcaption>
		                <span><a href="#">速速抢购</a></span>
		            </figure>
		      </div>
		      <div>
		            <figure>
		                <img src="images/book.png" width="139" height="115">
		                <figcaption>如果我能说了算</figcaption>
		                <span><a href="#">速速抢购</a></span>
		            </figure>
		            <figure>
		                <img src="images/book5.png" width="139" height="115">
		                <figcaption>如果我能说了算</figcaption>
		                <span><a href="#">速速抢购</a></span>
		            </figure>
		            <figure>
		                <img src="images/book2.png" width="139" height="115">
		                <figcaption>如果我能说了算</figcaption>
		                <span><a href="#">速速抢购</a></span>
		            </figure>
		            <figure style="margin-right:0px;border:1 solid blue;">
		                <img src="images/bookname.png" width="139" height="115">
		                <figcaption>如果我能说了算</figcaption>
		                <span><a href="#">速速抢购</a></span>
		            </figure>
		      </div>
		      
		</div>
		<!-- floatpart -->
		</div>
		
     </div>
   <footer style="padding-bottom:20px;margin-top:20px;" id="footer">
        
            <div>&nbsp;</div>
            <p style="background:#87520E; height:40px;">&nbsp;</p>
    </footer>
		
</body>
</html>
